/*
  学习目标：React中 Switch 组件的使用和 404页面 的设置

  Swtich组件的作用：匹配到任意一个路径，就停止匹配
  404 一定是 通配，并且要写在最后面
*/
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          {/* Swtich组件的作用：匹配到任意一个路径，就停止匹配 */}
          {/* 👍 推荐用Swtich组件包住所有的Route */}
          <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/My" component={My}></Route>
            {/* 这时候我匹配到第一个/my,后面的/my就不会再匹配了 */}
            <Route path="/My" component={My}></Route>
            <Route path="/My" component={My}></Route>
            <Route path="/Friend" component={Friend}></Route>

            {/* 404 一定是 通配，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <div>我是NotFount组件-路径都匹配不上，就显示404吧</div>;
}
function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
